*{
    margin: 0;
    padding: 0;

}
a{
    text-decoration: none;
    color: black;
}
li{
  list-style: none;  
}
.container{
    margin: auto;
    width: 1200px;
}
header{
   
     @extend .container;
     display: flex;
     justify-content: space-between;
     .logo{
         a{
             display: flex;
            align-items: center;
            margin: 80px;
            img{
             width: 40px;
             height: 40px;
            }
            h1{
               margin-left: 10px; 
            }
        }
         
     }
     .message{
        margin: 80px;
        ul{
            display: flex;
            align-items: center;
            li{
                cursor: pointer;
                margin-left: 30px;
            }
        }
     }
}
main{
     @extend .container;
     position: relative;
     .content{
         width: 500px;
         height: 500px;
         background: linear-gradient(to top,white,skyblue);
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
         .name{
              display: flex;
              width: 70%;
              margin: auto;
             height: 40px;
              padding-top: 20px;
              h3{
                  font-size: 20px;
                  margin-right: 10px;
                  cursor: pointer;
                  color: gray;
              }
              .active{
                    font-size: 25px;
                    border-bottom:2px solid red;
                    color: black;
              }
         }
         form{
             width: 70%;
             height: 60%;
             margin: auto;
            padding-top: 20px;
             input{
                
                 width: 100%;
                 height: 40px;
                 margin-top: 40px;
                 outline: none;
             }
             p{
                 color: red;
                 font-size: 12px;
             }
             .submit{
                width: 100%;
                height: 40px;
                 background-color: orange;
                 cursor: pointer;
             }
         }
         h4{
             width: 70%;
             height: 20px;
             margin: auto;
             padding: 20px 0;
         }
         .other{
             ul{
                 display: flex;
                 justify-content: space-evenly;
                 li{
                     img{
                         width: 30px;
                         height: 30px;
                     }
                 }
             }
         }
     }
}
footer{
    @extend .container;
   
    p{
        position: fixed;
        bottom: 0px;
        left: 45%;
        font-size: 12px;
    }
}